<template>
  <div class="class-name">/category/list</div>
  <el-button @click="createCategory">创建分类</el-button>
  <el-button @click="showCreateDrawer = true">更新分类1</el-button>
  <el-button @click="createCategory2">更新分类2</el-button>
  <el-button @click="go2CategoryDetail">分类详情</el-button>

  <CreateDrawer
    :is-drawer-visible="showCreateDrawer"
    @close-drawer="showCreateDrawer = false"
    :category-model="categoryModel"
  ></CreateDrawer>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import CreateDrawer from "./components/CreateDrawer.vue";

const showCreateDrawer = ref(false);
const categoryModel = ref({
  id: 1,
  name: "1",
});
const createCategory = () => {
  showCreateDrawer.value = true;
  categoryModel.value = {
    id: -1,
    name: "",
  };
};
const createCategory2 = () => {
  showCreateDrawer.value = true;
  categoryModel.value = {
    id: 2,
    name: "2",
  };
};

const router = useRouter();
const go2CategoryDetail = () => {
  router.push({
    name: "CategoryDetail",
    params: { id: 1 },
  });
};
console.log(ref);
</script>
